const pack = require("./package.json");
const dayjs = require("dayjs");
const ZipDist = require('./zip')
const { NODE_ENV, VUE_APP_ENV, VUE_APP_APIHOST } = process.env;
const isProd = NODE_ENV === "production";
const date = dayjs().format("YYYYMMDDHHmmss");

console.log({ NODE_ENV, VUE_APP_ENV, VUE_APP_APIHOST, date });
const CDN_LIST = {
	css: [
		// "https://yanzichu.oss-cn-beijing.aliyuncs.com/static/index.css",
		"https://yanzichu.oss-cn-beijing.aliyuncs.com/static/normalize.css"
	],
	js: [
		"https://yanzichu.oss-cn-beijing.aliyuncs.com/static/vue.runtime.min.js",
		"https://yanzichu.oss-cn-beijing.aliyuncs.com/static/vuex.min.js",
		"https://yanzichu.oss-cn-beijing.aliyuncs.com/static/axios.min.js",
		"https://yanzichu.oss-cn-beijing.aliyuncs.com/static/qs.min.js",
		// "https://saas-tools.oss-cn-shanghai.aliyuncs.com/npm/vue-toasted@1.1.28/dist/vue-toasted.min.js",
		"https://yanzichu.oss-cn-beijing.aliyuncs.com/static/clipboard.min.js",
		"https://yanzichu.oss-cn-beijing.aliyuncs.com/static/store.legacy.min.js",
	]
};
let outputDir = `dist/${VUE_APP_ENV || 'dev'}`
module.exports = {
	outputDir,
	publicPath: "/",
	lintOnSave: true,
	productionSourceMap: false,
	parallel: require("os").cpus().length > 1,
	css: {
		extract: isProd,
		sourceMap: false,
		loaderOptions: {
			sass: {
				prependData: `@import "@/assets/css/common.scss";`
			}
		}
	},
	devServer: {
		port: 8200,
		disableHostCheck: true
	},
	chainWebpack: (config) => {
		// 设置 svg
		config.module.rule("svg").uses.clear();

		config.module
			.rule("svg-sprite-loader")
			.test(/.svg$/)
			.exclude.add(/node_modules/)
			.end()
			.use("svg-sprite-loader")
			.loader("svg-sprite-loader")
			.options({
				symbolId: "icon-[name]"
			});
		// it can improve the speed of the first screen, it is recommended to turn on preload
		config.plugin("preload").tap(() => [
			{
				rel: "preload",
				// to ignore runtime.js
				// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
				fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
				include: "initial"
			}
		]);
		if (isProd) {
			// 给js和css配置版本号
			config.output.filename(`js/[name].js?v=${pack.version}&t=${date}`).end();
			config.output.chunkFilename(`js/[name].js?v=${pack.version}&t=${date}`).end();
			config.plugin("extract-css").tap(() => [
				{
					filename: `css/[name].css?v=${pack.version}&t=${date}`,
					chunkFilename: `css/[name].css?v=${pack.version}&t=${date}`
				}
			]);
			// 生产环境配置
			// 移除 prefetch 插件
			config.plugins.delete("prefetch");
			// 移除 preload 插件
			config.plugins.delete("preload");
		}
		// 生产环境注入cdn
		config.plugin("html").tap((args) => {
			if (isProd) {
				args[0].cdn = CDN_LIST;
			}
			args[0].APP_ENV = VUE_APP_ENV
			return args;
		});

		// 生产模式下
		if (isProd) {
			// ============压缩图片 start============
			// config.module
			// 	.rule("images")
			// 	.use("image-webpack-loader")
			// 	.loader("image-webpack-loader")
			// 	.options({
			// 		limit: 10000,
			// 		bypassOnDebug: true
			// 	})
			// 	.end();
			// ============压缩图片 end============
			// 去掉元素之间空格
			config.module
				.rule("vue")
				.use("vue-loader")
				.loader("vue-loader")
				.tap((options) => {
					options.compilerOptions.preserveWhitespace = true;
					return options;
				})
				.end();

			config.optimization.minimizer("terser").tap((args) => {
				// 去掉注释
				args[0].terserOptions.output = { comments: false };
				return args;
			});
		}
	},

	configureWebpack: (config) => {
		if (isProd) {
			// 用cdn方式引入
			config.externals = {
				vue: "Vue",
				vuex: "Vuex",
				axios: "axios",
				Qs: "qs",
				store: 'store',
				ClipboardJS: "Clipboard"
			};
			if (VUE_APP_ENV != 'dev') {
				// 打包后压缩zip
				config.plugins.push(new ZipDist({ outputDir, name: VUE_APP_ENV + '_' + date }))
			}
		}
	}
};
